<template>
  <div class="login-container">
    <div class="login-form">
      <h2>用户登录</h2>

      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input
            id="username"
            v-model="loginForm.username"
            type="text"
            placeholder="请输入用户名"
            required
          />
        </div>

        <div class="form-group">
          <label for="password">密码:</label>
          <input
            id="password"
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            required
          />
        </div>

        <button type="submit" :disabled="loginLoading" class="login-btn">
          {{ loginLoading ? '登录中...' : '登录' }}
        </button>

        <div v-if="loginError" class="error-message">
          {{ loginError }}
        </div>
      </form>

      <div v-if="isLoggedIn" class="user-info">
        <h3>当前用户信息</h3>
        <p>用户名: {{ userInfo?.username }}</p>
        <p>邮箱: {{ userInfo?.email }}</p>
        <p>权限: {{ userPermissions.join(', ') }}</p>
        <button @click="handleLogout" class="logout-btn">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'LoginView',

  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
    }
  },

  computed: {
    // 使用命名空间映射state和getters
    ...mapState('user', ['loginLoading', 'loginError']),
    ...mapGetters('user', ['isLoggedIn', 'getUserInfo', 'getUserPermissions']),

    // 计算属性别名
    userInfo() {
      return this.getUserInfo
    },

    userPermissions() {
      return this.getUserPermissions
    },
  },

  methods: {
    // 使用命名空间映射actions
    ...mapActions('user', ['login', 'logout']),

    async handleLogin() {
      try {
        const result = await this.login(this.loginForm)
        console.log('登录成功:', result)
        // 登录成功后的处理，比如跳转到首页
        this.$message.success('登录成功！')
      } catch (error) {
        console.error('登录失败:', error)
        this.$message.error('登录失败：' + error.message)
      }
    },

    async handleLogout() {
      try {
        await this.logout()
        this.$message.success('已退出登录')
        // 清空表单
        this.loginForm.username = ''
        this.loginForm.password = ''
      } catch (error) {
        console.error('退出登录失败:', error)
        this.$message.error('退出登录失败')
      }
    },
  },

  mounted() {
    // 页面加载时检查token并获取用户信息
    if (this.isLoggedIn && !this.userInfo) {
      this.$store.dispatch('user/fetchUserInfo')
    }
  },
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #007bff;
}

.login-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 1rem;
}

.login-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.login-btn:hover:not(:disabled) {
  background-color: #0056b3;
}

.error-message {
  color: #dc3545;
  text-align: center;
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

.user-info {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.user-info h3 {
  margin-bottom: 1rem;
  color: #495057;
}

.user-info p {
  margin: 0.5rem 0;
  color: #6c757d;
}

.logout-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #c82333;
}
</style>
